<template>
	<!-- 添加弹框 -->
	<el-dialog  title="" width="50%"  :append-to-body="true"visible :show-close="false"  class="wrap" @close="cancel" >
		<i class="el-icon-close close" @click="cancel" style="color: white;"></i>
	    <div class="bt">补课单修改</div>
		<div class="gn" style="width: 100%;margin-top: 5px; padding-bottom: 20px;">
	    	<el-button type="primary" plain size="small"    @click="kqlist" icon="menu">考勤补课</el-button>
	    	<el-button type="warning" plain size="small"   style='margin-right: 10px;' @click="kslist" icon="menu">弱补</el-button>
	    	<el-button type="warning" plain size="small"   style='margin-right: 10px;' @click="sflist" icon="menu">收费补课</el-button>
	    	<el-button type="success" plain size="small"   style='margin-right: 10px;' @click="tjbk" >添加</el-button>
	    </div>
	    <!-- 数据表格展示区域 -->
        <el-table
            v-if="kqlb"
            :data="dataList"
            stripe
            border
            align="center"
            @select="checkSelect"
            @select-all="checkall">
            <el-table-column type="selection" width="55"></el-table-column>
            <div slot='empty'>
                <img src="../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
                <span style="vertical-align: middle;">暂时还没有内容哦!</span>
            </div>
            <el-table-column
                :prop="v.prop"
                :label="v.label"
                v-for="(v,index) in portTitleList"
                align="center"
                show-overflow-tooltip
                v-if="v.hide != 0"
                :formatter="v.formatter"
                :align="v.align || 'center'"
                :fixed="v.fixed"
                :class-name="v.columnStyle"
                :width="v.width"
                :min-width="v.minWidth"
                :header-align="v.headerAlign || 'center'"
                >
                 <template scope="scope">
                    <div slot="reference">
                        <span style="vertical-align:middle;">{{ scope.row[scope.column.property] }}</span>
                    </div>
                </template>
            </el-table-column>
			
        </el-table>
		<!-- 数据表格展示区域 -->
		<el-table
            v-if="kslb"
            :data="dataList2"
            stripe
             border
            align="center"
            @select="checkSelect"
            @select-all="checkall">
            <el-table-column type="selection" width="55"></el-table-column>
            <div slot='empty'>
                <img src="../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
                <span style="vertical-align: middle;">暂时还没有内容哦!</span>
            </div>
            <el-table-column
                :prop="v.prop"
                :label="v.label"
                v-for="(v,index) in portTitleList2"
                align="center"
                show-overflow-tooltip
                v-if="v.hide != 0"
                :formatter="v.formatter"
                :align="v.align || 'center'"
                :fixed="v.fixed"
                :class-name="v.columnStyle"
                :width="v.width"
                :min-width="v.minWidth"
                :header-align="v.headerAlign || 'center'"
                >
                 <template scope="scope">
                    <div slot="reference">
                        <span style="vertical-align:middle;">{{ scope.row[scope.column.property] }}</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格展示区域 -->
		<el-table
            v-if="sflb"
            :data="dataList3"
            stripe
             border
            align="center"
            @select="checkSelect"
            @select-all="checkall">
            <el-table-column type="selection" width="55"></el-table-column>
            <div slot='empty'>
                <img src="../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
                <span style="vertical-align: middle;">暂时还没有内容哦!</span>
            </div>
            <el-table-column
                :prop="v.prop"
                :label="v.label"
                v-for="(v,index) in portTitleList3"
                align="center"
                show-overflow-tooltip
                v-if="v.hide != 0"
                :formatter="v.formatter"
                :align="v.align || 'center'"
                :fixed="v.fixed"
                :class-name="v.columnStyle"
                :width="v.width"
                :min-width="v.minWidth"
                :header-align="v.headerAlign || 'center'"
                >
                 <template scope="scope">
                    <div slot="reference">
                        <span style="vertical-align:middle;">{{ scope.row[scope.column.property] }}</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页查询区域 -->
         <el-pagination
            v-if="kqlb"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageindex"
            :page-sizes="pagesizes"
            :page-size="pagesize"
            :layout="layout"
            :total="total"
            class="class-page">
        </el-pagination>
        <el-pagination
            v-if="kslb"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageindex2"
            :page-sizes="pagesizes2"
            :page-size="pagesize2"
            :layout="layout2"
            :total="total2"
            class="class-page">
        </el-pagination>
        <el-pagination
            v-if="sflb"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageindex3"
            :page-sizes="pagesizes3"
            :page-size="pagesize3"
            :layout="layout3"
            :total="total3"
            class="class-page">
        </el-pagination>
    </el-dialog>  
</template>
<script type="text/javascript">
	import qs from 'qs'
	export default {
		props: ['params'],
		data() {
			return {
				kqlb:true,
				kslb:false,
				sflb:false,
				dataList:[],
				dataList2:[],
				dataList3:[],
				xsbklist:[],
				/*分页属性设置*/
                layout: 'total, sizes, prev, pager, next, jumper',//组件布局
			    pageindex: this.$store.state.pageindex,//当前分页页码
                pagesizes: this.$store.state.pagesizes,//显示个数的选择器选项
                pagesize: this.$store.state.pagesize,//每页显示条目数
                total: 0,//总条数
                layout2: 'total, sizes, prev, pager, next, jumper',//组件布局
			    pageindex2: this.$store.state.pageindex,//当前分页页码
                pagesizes2: this.$store.state.pagesizes,//显示个数的选择器选项
                pagesize2: this.$store.state.pagesize,//每页显示条目数
                total2: 0,//总条数
                 layout3: 'total, sizes, prev, pager, next, jumper',//组件布局
			    pageindex3: this.$store.state.pageindex,//当前分页页码
                pagesizes3: this.$store.state.pagesizes,//显示个数的选择器选项
                pagesize3: this.$store.state.pagesize,//每页显示条目数
                total3: 0,//总条数
				portTitleList: [
                    {
                       prop:'zwm',
                       label:'学生',
                       hide:1,
                       align:'center',
                       fixed:false,
                       width:'',
                       minWidth:'',
                       headerAlign:'center',
                       formatter: function(row,column) {
                       }
                   },
                    {
                        prop:'bjmc',
                        label:'班级',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {}
                    },

                     {
                        prop:'day',
                        label:'Day',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {
                        }
                    },

                ],
                portTitleList2: [

                    {
                       prop:'xsmc',
                       label:'学生',
                       hide:1,
                       align:'center',
                       fixed:false,
                       width:'',
                       minWidth:'',
                       headerAlign:'center',
                       formatter: function(row,column) {
                       }
                   },
                    {
                        prop:'bjmc',
                        label:'班级',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {}
                    },

                     {
                        prop:'kslx',
                        label:'考试类型',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {
                        }
                    },
                     {
                        prop:'score',
                        label:'考试分数',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {
                        }
                    },

                ],
                 portTitleList3: [
                    {
                       prop:'zwm',
                       label:'学生',
                       hide:1,
                       align:'center',
                       fixed:false,
                       width:'',
                       minWidth:'',
                       headerAlign:'center',
                       formatter: function(row,column) {
                       }
                   },
                    {
                        prop:'mc',
                        label:'班级',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {}
                    },
                     
                ]
			}
		},
		created() {
			this.search();//分页获取默认数据
		},
		methods: {
			 kqlist(){
	            this.search()
	            this.kqlb = true;
	            this.kslb = false;
	            this.sflb = false;
	        },
	          kslist(){
	            this.search2();
//	            this.getkslxlist()
	            this.kqlb = false;
	            this.kslb = true;
	            this.sflb = false;
	            
	        },
	          sflist(){
	            this.search3();
//	            this.getkslxlist()
	            this.kqlb = false;
	            this.kslb = false;
	            this.sflb = true;
	        },
	        tjbk(){
	        	this.$emit('close', { type: 'add', cancel: true,data:this.xsbklist })
	        },
	         search () {
		    //查询搜索触发事件
		    	var logininfo = JSON.parse(localStorage.logininfo);
            	this.searchLoading = true;
           	  	var params2 = qs.stringify({
//                  bjid:this.vbjid,
                    xxid: logininfo.xxid,
                    pageindex: this.pageindex,
                    pagesize: this.pagesize,
                })
             //执行
                 this.axios.post(this.$store.state.api + 'kqjl/kscjlist',  params2 )
                 .then(res => {
                 console.log('11111',res)
                  let data = res.data.data;
                  let list = data.list;
                  this.dataList = list;
                  this.total = data.totalPage;
                  this.searchLoading = false;
                 }).catch(res => {
					 console.log(res)
                  this.searchLoading = false;
				})
          },
          search2 () {
        //查询搜索触发事件
        var logininfo = JSON.parse(localStorage.logininfo);
              this.searchLoading = true;
             var params2 = qs.stringify({
             		bjid:this.vbjid,
                    xxid: logininfo.xxid,
                    pageindex: this.pageindex2,
                    pagesize: this.pagesize2,
                    kslx:this.vkslx,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'ksscore/kslist',  params2 )
                 .then(res => {
                    console.log('qqq',res)
                  let data = res.data.data;
                  let list = data.listdate;
                  this.total2 = data.totalCnt;
                  this.dataList2 = list;
                  this.searchLoading = false;
                 }).catch(res => {
					 console.log(res)
                  this.searchLoading = false;
				})
          },
           search3 () {
        //查询搜索触发事件
        var logininfo = JSON.parse(localStorage.logininfo);
              this.searchLoading = true;
             var params2 = qs.stringify({
                   	keyword:'',
             		yhid: logininfo.id,
                    xxid: logininfo.xxid,
                    pageindex: this.pageindex3,
                    pagesize: this.pagesize3,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'xs/sfbkcxxs',  params2 )
                 .then(res => {
                    console.log('qqq',res)
                  let data = res.data.data;
                  let list = data.list;
                  this.total3 = data.totalPage;
                  this.dataList3 = list;
                  this.searchLoading = false;
                 }).catch(res => {
					 console.log(res)
                  this.searchLoading = false;
				})
          },
          handleSizeChange2 (val) {//每页显示条数触发事件
                this.pagesize = val;
                this.pageindex = 1;
                this.search2();
            },
            handleCurrentChange2 (val) {//分页触发事件
                this.search2();
            },
           handleSizeChange (val) {//每页显示条数触发事件
                this.pagesize = val;
                this.pageindex = 1;
                this.search();
            },
            handleCurrentChange (val) {//分页触发事件
                this.search();
            },
           checkSelect (selection, row) {//点击单选select触发事件
                console.log(selection, row)
                let strID = [];
                selection.forEach(function(v,i){
                    strID.push(v)
                })
                this.xsbklist = strID
                console.log(this.xsbklist,88)
//              this.multipleDelNum = strID.join(",");
            },
            checkall (selection) {//点击全选select触发事件
            	let strID = [];
                selection.forEach(function(v,i){
                   strID.push(v)
                })
                this.xsbklist = strID
//              this.multipleDelNum = strID.join(",");
            },
			cancel() {
				this.$emit('close', { type: 'add', cancel: true })
			},
		}
	}
</script>
<style lang="less" scoped >
	.wrap {
		
		.tab{
		  top:20px;
		}
		.bt{
			position: absolute;
			width: 100%;
			height: 50px;
			margin: 0 auto;
			top: 0;
			left: 0;
			// margin-top: -70px;
			background: #50BFFF;
			// margin-left: -20px;
			// margin-bottom: 20px;
			color:white;
			text-align:left;
			line-height: 50px;
			font-size: 17px;
			padding-left: 15px;
		}
		.close{
				z-index: 10;
				position: absolute;
		}
		
		
	}
</style>
